canvas的繪製居本上全部都是用向量操作，有時候要取得座標位置來定位，而座標位置彼此之間是有相依性與關聯性，也就是座標需要有大小與方向，而具有大小與方向的實體，稱之為向量，就需要計算向量的函數。例如，在繪製圖形的時候有時候會需要使用三角函數去取得座標位置，或是說兩點連線時不想要直線的連線，想要有彎度的弧形，像下圖當我在重製圖片時，邊角遇到轉角的時候想要有漂亮的弧形。角度的概念如果忘記的話可以搜尋三角函數，或參考 ZTA的解釋與圖。

向量座標的計算函數

p5.js提供了很多向量座標的計算函數供使用，以下摘要一些常用的來做介紹

add()

將 x、y 和 z 分量添加到向量，將一個向量添加到另一個向量，或將兩個獨立向量相加。

示範中將綠與黃兩個createVector(40, 50)向量相加，並用相加結果新繪製了藍色的圓

sub()

從向量中減去 x、y 和 z 分量，從一個向量中減去另一個向量，或從兩個獨立向量中減去。

toString()

取得向量的物件數據，返回是一個字串，可以用String(v) 或者v.toString()。
可以先看固定向量的話，返回座標x, y, z 數據組

mag()

計算向量的大小（長度）並將結果作為浮點數返回（也可以看成是方程式 sqrt(xx + yy + zz)。），可以想成分別有A 點和B 點的座標，想取得兩點間的長度。

長度就是X 的位置平方 + Y 的位置平方，然後開根號

heading()

計算該向量的旋轉角度（僅限 2D 向量能使用），並且採用弧度，所以要先記得用 angleMode()設定成弧度，angleMode()有分 '弧度 RADIANS ' 或 '度數 DEGREES'。

一個圓有 360 度，一個圓有 2*PI 弧度。

已下圖為例，小白點是我們終點的位置，圓點旋轉至終點的角度度數是0.28

degrees()

與heading() 類似，將弧度測量值轉換為其相應的度值，弧度和度數是測量同一事物的兩種方法。

一個圓有 360 度，一個圓有 2*PI 弧度。

小結

有將近30種的函式可以引用，有需要的話可以去p5.js的官網上看看。在結合上篇文章提到的像素數據操作，可以達成向下圖這樣的效果